<template>
  <div class="line-board-tv-page-wrapper">


    <div class="wrapper-header" style="position: relative;">
      <span class="title">{{contentTitle}}</span>
      <!--<div style="position:absolute;right:10px;top: 50%;transform: translate(0, -50%);">-->
        <!--<v-clock></v-clock>-->
      <!--</div>-->

    </div>

    <div class="wrapper-table">
      <table id="customers">
        <tbody>
        <tr class="table-header">
          <template v-for="item in tableHeader">
            <th class="one-line">{{item.label}}</th>
          </template>
        </tr>

        <template v-for="dataitem,index in tableData">
          <tr class="table-row" :class="index%2===1?'alt':''">
            <td class="one-line" v-for="headitem in tableHeader">{{dataitem[headitem.prop]}}</td>
          </tr>
        </template>


        </tbody>
      </table>
    </div>


    <div class="wrapper-auto-flex"></div>
    <div class="wrapper-footer">
      <span>Copyright © 2013-2024 {{$getTextByLangKey('深圳市华师特科技有限公司')}}</span>
    </div>


    <user-check></user-check>
  </div>

</template>

<script>


  import card from '@/base/card.vue'
  import table from '@/base/AutoWidthTable.vue'
  import lineStatusAction from '@/base/lineStatusAction.vue'
  import request from '@/common/js/request'
  import util from '@/common/js/util'
  import clock from '@/base/Clock.vue'
  import usercheck from '@/base/usercheck.vue'


  export default {
    data() {
      return {
        contentTitle:this.$getTextByLangKey('SMT生产信息汇总'),
        nowProduce: {},
        waitProduce: {},

        tableHeader: [],
        tableData: [],
        page: null,
        showClock: false,
        showTv: false,

        //        这是实现自动刷新功能的
        timer: '',
        isRequesting: false
      }
    },
    created: function () {

      this.fetchData()
    },

    destroyed: function () {
      this.stopTimer()
      console.log('---- destroyed ----')
    },

    watch: {
      // 如果路由有变化，会再次执行该方法
      '$route': 'fetchData'
    },

    methods: {

      getTimeToDate: function (time) {

        if (time != null) {
          var date = new Date(time).format("yyyy/MM/dd hh:mm")
          return date
        }
        return ''
      },
      fetchData: function () {

        this.stopTimer()

        let path = this.$route.path
        if (path.startsWith('/wrapper')) {
          this.showTv = true
          this.showClock = false
        } else {
          this.showTv = false
          this.showClock = true
        }

        this.creatTimer()

      },

      creatTimer: function () {
        this.autoRequest()
        this.timer = setInterval(() => {
          if (!this.isRequesting) {
//            console.log('开始自动请求')
            this.autoRequest()
          } else {
//            console.log('请求结果未返回')
          }
        }, 3000)
      },
      stopTimer: function () {
        clearTimeout(this.timer)
        this.isRequesting = false
      },

      autoRequest: function () {
        this.isRequesting = true
        console.log('电视机产线列表请求')
        request.requestLineBoard(res => {
          this.isRequesting = false
          let list = res.data.data.list
          let header = res.data.data.header
          let tableData = []
          list.forEach(item => {
            item.lineName_link = "./#/wrapper/lineStatus?chanxian=" + item.lineName;
            item.startTime = this.getTimeToDate(item.startTime)
            item.finalTime = this.getTimeToDate(item.finalTime)
            item.estimateFinishTime = this.getTimeToDate(item.estimateFinishTime)
            item.estimateStartTime = this.getTimeToDate(item.estimateStartTime)
            tableData.push(item)
          })

          this.tableHeader = res.data.data.header
          this.tableData = tableData
        }, res => {
          this.isRequesting = false
        })


      },

      handleEdit: function (index, row) {
        console.log(index)
        console.log(row)
        this.$emit('handleEdit', index, row)
      },
      handleDelete: function (index, row) {
        this.$emit('handleDelete', index, row)
      },
      rowClick: function (row, event, column) {
      },
      handleSizeChange: function (val) {
        this.$emit("handleSizeChange", val)
      },

      handleCurrentChange: function (val) {
//        console.log('sbsbsbsb')
        this.page.currentPage = val
//        this.fetchData()
      },

      creatDialog: function () {
        console.log('dddd')
        this.dialogVisible = true;

      },
      cancelDialog: function () {
        this.dialogVisible = false;
      },
      confrimDialog: function () {
        this.dialogVisible = false;
        this.$emit('confrimDialog', this.excelForm)
      },
      updateNowProduce: function (val) {
        this.nowProduce = val
      },

      updateWaitProduce: function (val) {
        this.waitProduce = val
      },
    },
    components: {
      'card-component': card,
      'table-component': table,
      'action-componet': lineStatusAction,
      'v-clock': clock,
      'user-check': usercheck,
    },

  }
</script>


<style scoped lang="stylus">
  .line-board-tv-page-wrapper {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    width 100%
    padding: 10px 10px 0 10px
    display flex
    flex-direction column

    .one-line {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .wrapper-header {

      display: flex
      flex-direction row
      margin-bottom 10px
      .title {
        font-size 24px
        color: #000
        font-weight bold
        flex 1
        text-align center
      }
    }

    .wrapper-table {
      #customers {

        width: 100%;
        border-collapse: collapse;
        font-size: 12px;

        .table-header {
          th {
            color: #fff;
            background-color: #606266;
            border: 1px solid #606266;
            font-size: 12px;
            padding: 3px;
            vertical-align: top;
            text-align: left;
            width 10%
          }
        }

        .table-row {
          td {
            min-width: 24px;
            border: 1px solid #d4d4d4;
            padding: 5px;
            padding-top: 7px;
            padding-bottom: 7px;
            vertical-align: top;
            color: #000000;
            font-weight bold
          }
          &.alt {
            td {
              color: #000000;
              font-weight bold
              background-color: #f6f4f0;
            }
          }
        }
      }

    }

    .wrapper-auto-flex {
      flex: auto;
    }
    .wrapper-footer {
      height: 14px;
      span {
        display: block;
        width: 100%;
        line-height: 14px;
        font-size 12px
        text-align: center;
        color: rgb(100, 102, 104);
      }
    }
  }
</style>


